<template>
  <div class="header-nav">
    <nav class="navbar navbar-expand-lg navbar-light bg-light container">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="../assets/images/logo.png" alt="Smark">
        </a>
        <button class="navbar-toggler" type="button" @click="toggleCollapse" aria-controls="navbarNav"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div :class="['collapse', 'navbar-collapse', { 'show': isCollapsed }]" id="navbarNav">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <router-link class="nav-link" to="/">主页</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/catatopt">猫猫收养</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/dogatopt">狗狗领养</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/informationentry">信息录入</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/products">商品购买</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" :to="{ name: 'Login' }">登录</router-link>
            </li>
            <!-- <li class="nav-item">
              <router-link class="nav-link" to="#">注册</router-link>
            </li> -->
            <!-- 登录和注册移到了右侧 -->
          </ul>

          <!-- 设置下拉菜单 -->
          <div class="d-flex align-items-center">
            <el-dropdown trigger="click" class="me-3">
              <span class="el-dropdown-link d-flex align-items-center">
                欢迎,admin<i class="el-icon-arrow-down el-icon--right ms-2"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="goinfo">个人资料</el-dropdown-item>
                <el-dropdown-item @click.native="goinfo">我的订单</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <!-- 联系电话 -->
            <div class="phone d-flex align-items-center">
              <font-awesome-icon :icon="['fas', 'phone']" />
              <span class="ms-2">+(202) 555-0178</span>
            </div>

            <!-- 登录和注册链接 -->
            <!-- <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">登录</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">注册</a>
            </li>
          </ul> -->
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: "HeaderNav", // 确保有这个属性
  data() {
    return {
      isCollapsed: false
    }
  },
  methods: {
    // 控制显示与隐藏导航栏
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    logout() {
      // 退出登录
      this.$router.push({
        name: 'Login',
      });
    },

    // goinfo() {
    //   this.$router.push({
    //     name: 'SettingInfo',
    //   });
    // }
    // 跳转个人信息页面
    goinfo() {
      // 获取目标路由名称
      const targetRouteName = 'SettingInfo';

      // 检查当前路由名称是否与目标路由名称相同
      if (this.$route.name !== targetRouteName) {
        // 如果不同，则进行导航
        this.$router.push({ name: targetRouteName }).catch(err => {
          // 捕获并忽略 NavigationDuplicated 错误
          if (err.name !== 'NavigationDuplicated') throw err;
        });
      } else {
        // 可选：可以在这里添加一些逻辑，比如通知用户已经在该页面上
        console.log('Already on the SettingInfo page.');
      }
    }


  }
}
</script>

<style scoped>
.navbar {
  padding: 1rem;
  transition: .5s;
}

.navbar-brand img {
  max-height: 40px;
  /* 根据需要调整 */
}

.nav-item {
  letter-spacing: .5px;
  font-size: 13px;
  font-weight: 700;
  color: #41485a;
  padding: 15px 10px;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

.phone {
  font-size: 16px;
  font-weight: 600;
  color: #fea116;
}

/* 添加样式以使当前页面的导航链接变黄 */
.nav-link.router-link-exact-active {
  color: rgba(254, 161, 22, 1);
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #ecf5ff;
  color: #fea116;
}
</style>